<template>
	<view class="page-container">
		<!-- 定位区域 -->
		<view class="location-bar">
			<view class="location" @click="showCityPicker">
				<text class="iconfont">📍</text>
				<text class="city-name">{{currentCity}}</text>
				<text class="iconfont">▼</text>
			</view>
		</view>

		<view class="cards-container">
			<!-- 定位授权提示 -->
			<view class="location-tips" v-if="showLocationTips">
				<view class="tips-content">
					<text class="tips-text">开启定位权限，查看附近的心动对象</text>
					<view class="tips-btns">
						<button class="btn cancel" @click="cancelLocation">暂不开启</button>
						<button class="btn confirm" @click="getLocation">立即开启</button>
					</view>
				</view>
			</view>

			<!-- 滑动提示 -->
			<view class="swipe-tips" v-if="showTips">
				<view class="tip left">
					<text class="arrow">←</text>
					<text class="text">左滑不喜欢</text>
				</view>
				<view class="tip right">
					<text class="text">右滑喜欢</text>
					<text class="arrow">→</text>
				</view>
			</view>
			<view v-for="(girl, index) in girlsList" 
				:key="index"
				class="card-wrapper"
				:style="{
					zIndex: girlsList.length - index,
					transform: `translateX(${girl.x}px) rotate(${girl.rotate}deg)`,
					opacity: girl.opacity
				}"
				@touchstart="handleTouchStart($event, index)"
				@touchmove="handleTouchMove($event, index)"
				@touchend="handleTouchEnd($event, index)">
				<view class="girl-card">
					<view class="girl-photos">
						<swiper 
							class="photos-swiper" 
							:indicator-dots="true" 
							:autoplay="false"
							:circular="true"
							:interval="3000"
							:duration="500"
							@change="handlePhotoChange">
							<swiper-item v-for="(photo, photoIndex) in girl.photos" :key="photoIndex">
								<image 
									:src="photo" 
									mode="aspectFill" 
									class="photo-item" 
									@tap.stop="() => previewImage(girl.photos, photoIndex)"
								></image>
							</swiper-item>
						</swiper>
						<view class="swipe-hint" :class="girl.direction">
							<text v-if="girl.direction === 'right'" class="hint-text like">喜欢</text>
							<text v-if="girl.direction === 'left'" class="hint-text nope">跳过</text>
						</view>
					</view>
					<view class="girl-info">
						<view class="info-row">
							<text class="girl-name">{{girl.name}}</text>
							<text class="girl-age">{{girl.age}}岁</text>
						</view>
						<view class="info-row">
							<text class="girl-location">{{girl.location}}</text>
							<text class="dot">·</text>
							<text class="girl-occupation">{{girl.occupation}}</text>
							<text class="dot">·</text>
							<text class="girl-education">{{girl.education}}</text>
						</view>
						<view class="info-row">
							<text class="girl-income">{{girl.income}}</text>
							<text class="dot">·</text>
							<text class="girl-constellation">{{girl.constellation}}</text>
							<text class="dot">·</text>
							<text class="girl-height">{{girl.height}}cm</text>
						</view>
						<view class="girl-tags" v-if="girl.tags && girl.tags.length">
							<text v-for="(tag, tagIndex) in girl.tags" 
								:key="tagIndex" 
								class="tag">{{tag}}</text>
						</view>
						<view class="hobby-list" v-if="girl.hobby && girl.hobby.length">
							<text class="hobby-label">兴趣爱好：</text>
							<text class="hobby-item" v-for="(hobby, hobbyIndex) in girl.hobby" 
								:key="hobbyIndex">{{hobby}}</text>
						</view>
						<text class="girl-description">{{girl.description}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: '',
				userId: '',
			},
			startX: 0,
			startY: 0,
			showTips: true,
			isFirstSwipe: true,
			currentCity: '定位中...',
			showLocationTips: true,
			locationAuth: false,
			girlsList: [
				{
					id: 1,
					name: '小美',
					age: 25,
					location: '上海',
					occupation: '设计师',
					photos: [
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照1.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照2.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照3.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照4.png'
					],
					tags: ['温柔', '善良', '爱运动', '170cm', '本科', '天秤座'],
					description: '喜欢旅行、摄影，期待遇见志同道合的你',
					education: '本科',
					income: '15-25k',
					constellation: '天秤座',
					height: 170,
					weight: 50,
					hobby: ['旅行', '摄影', '美食', '看电影'],
					x: 0,
					y: 0,
					rotate: 0,
					scale: 1,
					opacity: 1,
					direction: ''
				},
				{
					id: 2,
					name: '小婷',
					age: 23,
					location: '北京',
					occupation: '教师',
					photos: [
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照5.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照6.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照7.png'
					],
					tags: ['知性', '独立', '爱读书', '168cm', '研究生', '处女座'],
					description: '热爱生活，享受当下的每一刻',
					education: '研究生',
					income: '10-20k',
					constellation: '处女座',
					height: 168,
					weight: 48,
					hobby: ['读书', '瑜伽', '烘焙', '音乐'],
					x: 0,
					y: 0,
					rotate: 0,
					scale: 1,
					opacity: 1,
					direction: ''
				},
				{
					id: 3,
					name: '小冰',
					age: 26,
					location: '深圳',
					occupation: '金融分析师',
					photos: [
						'https://202231117.oss-cn-beijing.aliyuncs.com/帅哥生活照1.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/帅哥生活照2.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/帅哥生活照3.png'
					],
					tags: ['优雅', '事业型', '会生活', '169cm', '海归', '射手座'],
					description: '工作认真，生活浪漫，希望找到一个志同道合的伴侣',
					education: '硕士',
					income: '25-35k',
					constellation: '射手座',
					height: 169,
					weight: 49,
					hobby: ['品酒', '高尔夫', '看话剧', '下厨'],
					x: 0,
					y: 0,
					rotate: 0,
					scale: 1,
					opacity: 1,
					direction: ''
				},
				{
					id: 4,
					name: '小雨',
					age: 24,
					location: '杭州',
					occupation: 'UI设计师',
					photos: [
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照8.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照9.png',
						'https://202231117.oss-cn-beijing.aliyuncs.com/美女生活照10.png'
					],
					tags: ['文艺', '可爱', '爱画画', '165cm', '本科', '双子座'],
					description: '喜欢画画和设计，希望能遇到一个懂我的人',
					education: '本科',
					income: '12-20k',
					constellation: '双子座',
					height: 165,
					weight: 46,
					hobby: ['绘画', '看展', '摄影', '手工'],
					x: 0,
					y: 0,
					rotate: 0,
					scale: 1,
					opacity: 1,
					direction: ''
				}
			]
		}
	},
	methods: {
		handlePhotoChange(e) {
			// 照片切换时的处理
			const current = e.detail.current;
			// 可以在这里添加照片切换的逻辑
		},
		handleTouchStart(event, index) {
			if (this.isFirstSwipe) {
				this.isFirstSwipe = false;
				this.showTips = false;
			}
			const touch = event.touches[0];
			this.startX = touch.clientX;
		},
		handleTouchMove(event, index) {
			const touch = event.touches[0];
			const moveX = touch.clientX - this.startX;
			const girl = this.girlsList[index];
			
			// 转换为rpx单位
			const rpxMoveX = moveX * (750 / uni.getSystemInfoSync().windowWidth);
			girl.x = rpxMoveX;
			
			// 旋转角度
			girl.rotate = rpxMoveX * 0.05;
			
			// 方向提示
			if (rpxMoveX > 50) {
				girl.direction = 'right';
			} else if (rpxMoveX < -50) {
				girl.direction = 'left';
			} else {
				girl.direction = '';
			}
			
			// 透明度
			const absMove = Math.abs(rpxMoveX);
			girl.opacity = Math.max(0.7, 1 - absMove / 400);
		},
		handleTouchEnd(event, index) {
			const girl = this.girlsList[index];
			const rpxMoveX = girl.x;
			
			// 判定滑动距离
			if (Math.abs(rpxMoveX) > 100) {
				// 添加动画效果
				girl.x = rpxMoveX > 0 ? 1000 : -1000;
				girl.rotate = rpxMoveX > 0 ? 45 : -45;
				girl.opacity = 0;
				
				setTimeout(() => {
					this.handleSwipeComplete(index, rpxMoveX > 0);
				}, 200);
			} else {
				// 回弹动画
				girl.x = 0;
				girl.rotate = 0;
				girl.opacity = 1;
				girl.direction = '';
			}
		},
		handleSwipeComplete(index, isLike) {
			this.girlsList.splice(index, 1);
			
			uni.showToast({
				title: isLike ? '已喜欢' : '已跳过',
				icon: 'none',
				duration: 500
			});
			
			if (this.girlsList.length === 0) {
				this.loadMoreGirls();
			}
		},
		loadMoreGirls() {
			uni.showToast({
				title: '加载更多...',
				icon: 'loading'
			});
		},
		previewImage(urls, current) {
			uni.previewImage({
				urls: urls,
				current: urls[current]
			});
		},
		// 获取定位
		getLocation() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.showLocationTips = false;
					this.locationAuth = true;
					// 根据经纬度获取城市名称
					this.getCityName(res.latitude, res.longitude);
				},
				fail: (err) => {
					console.error('定位失败:', err);
					// 判断是否是权限被拒绝
					if (err.errMsg.includes('auth deny')) {
						uni.showModal({
							title: '温馨提示',
							content: '需要获取您的地理位置，是否前往设置？',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (settingRes) => {
											if (settingRes.authSetting['scope.userLocation']) {
												this.getLocation();
											}
										}
									});
								} else {
									this.currentCity = '选择城市';
									this.showLocationTips = false;
								}
							}
						});
					} else {
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						});
						this.currentCity = '选择城市';
					}
				}
			});
		},
		
		// 获取城市名称
		getCityName(latitude, longitude) {
			// 这里使用腾讯地图或高德地图API进行逆地址解析
			// 示例使用模拟数据
			setTimeout(() => {
				this.currentCity = '上海市';
			}, 500);
		},
		
		// 取消定位
		cancelLocation() {
			this.showLocationTips = false;
			this.currentCity = '选择城市';
		},
		
		// 显示城市选择器
		showCityPicker() {
			// TODO: 实现城市选择功能
			uni.showToast({
				title: '城市选择功能开发中',
				icon: 'none'
			});
		}
	},
	onLoad() {
		// 移除自动隐藏的定时器
		this.showTips = true;
		this.isFirstSwipe = true;
		
		// 直接尝试获取定位
		this.getLocation();
	}
}
</script>

<style lang="scss">
// 添加text-ellipsis混入定义
@mixin text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f6f7;
	padding-bottom: env(safe-area-inset-bottom);
	
	.location-bar {
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.location {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			background: #f8f9fa;
			border-radius: 30rpx;
			
			.iconfont {
				font-size: 28rpx;
				color: #666;
				margin-right: 8rpx;
				
				&:last-child {
					font-size: 24rpx;
					margin-left: 8rpx;
					margin-right: 0;
				}
			}
			
			.city-name {
				font-size: 28rpx;
				color: #333;
				max-width: 200rpx;
				@include text-ellipsis;
			}
		}
	}

	.location-tips {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.tips-content {
			width: 600rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx;
			
			.tips-text {
				font-size: 32rpx;
				color: #333;
				text-align: center;
				margin-bottom: 40rpx;
				display: block;
			}
			
			.tips-btns {
				display: flex;
				justify-content: space-between;
				
				.btn {
					width: 240rpx;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					
					&.cancel {
						background: #f5f6f7;
						color: #666;
					}
					
					&.confirm {
						background: #f69489;
						color: #fff;
					}
				}
			}
		}
	}

	.cards-container {
		flex: 1;
		position: relative;
		padding: 20rpx;
		height: 100%;
		overflow: hidden;
		
		.swipe-tips {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			justify-content: space-between;
			width: 90%;
			z-index: 999;
			pointer-events: none;
			animation: fadeIn 0.5s ease-in-out;
			
			.tip {
				display: flex;
				align-items: center;
				backdrop-filter: blur(10px);
				background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
				border: 2rpx solid rgba(255,255,255,0.3);
				padding: 24rpx 40rpx;
				border-radius: 100rpx;
				box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
				transform: scale(0.9);
				transition: all 0.3s ease;
				animation: pulse 2s infinite;
				
				&.left {
					margin-right: 20rpx;
					background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,107,107,0.1));
					border-color: rgba(255,107,107,0.3);
					
					.arrow {
						color: #ff6b6b;
					}
					
					.text {
						color: #ff6b6b;
					}
				}
				
				&.right {
					margin-left: 20rpx;
					background: linear-gradient(135deg, rgba(17,226,153,0.2), rgba(17,226,153,0.1));
					border-color: rgba(17,226,153,0.3);
					
					.arrow {
						color: #11e299;
					}
					
					.text {
						color: #11e299;
					}
				}
				
				.text {
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 2rpx;
				}
				
				.arrow {
					font-size: 40rpx;
					font-weight: bold;
					margin: 0 16rpx;
				}
				
				@keyframes pulse {
					0% {
						transform: scale(0.95);
					}
					50% {
						transform: scale(1);
					}
					100% {
						transform: scale(0.95);
					}
				}
			}
		}
		
		@keyframes fadeIn {
			0% {
				opacity: 0;
				transform: translate(-50%, -50%) scale(0.8);
			}
			100% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}
		
		.card-wrapper {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transition: transform 0.2s ease-out;
			
			.girl-card {
				position: relative;
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
				
				.girl-photos {
					width: 100%;
					height: 65%;
					position: relative;
					
					.photos-swiper {
						width: 100%;
						height: 100%;
						
						.photo-item {
							width: 100%;
							height: 100%;
						}
					}
					
					.swipe-hint {
						position: absolute;
						top: 40rpx;
						left: 40rpx;
						right: 40rpx;
						display: none;
						z-index: 10;
						pointer-events: none;
						
						&.left, &.right {
							display: block;
						}
						
						.hint-text {
							font-size: 80rpx;
							font-weight: bold;
							padding: 20rpx 40rpx;
							border: 10rpx solid;
							border-radius: 20rpx;
							transform: rotate(-20deg);
							text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
							
							&.like {
								color: #11e299;
								border-color: #11e299;
								background: rgba(17, 226, 153, 0.1);
							}
							
							&.nope {
								color: #ff6b6b;
								border-color: #ff6b6b;
								background: rgba(255, 107, 107, 0.1);
							}
						}
					}
				}
				
				.girl-info {
					padding: 20rpx;
					height: 35%;
					overflow-y: auto;
					
					.info-row {
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;
						flex-wrap: wrap;
						
						.girl-name {
							font-size: 40rpx;
							font-weight: 600;
							margin-right: 16rpx;
						}
						
						.girl-age {
							font-size: 28rpx;
							color: #ff6b6b;
							background: rgba(255, 107, 107, 0.1);
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
						}
						
						.dot {
							margin: 0 10rpx;
							color: #999;
						}
						
						.girl-location, 
						.girl-occupation, 
						.girl-education,
						.girl-income,
						.girl-constellation,
						.girl-height {
							font-size: 28rpx;
							color: #666;
						}
					}
					
					.girl-tags {
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 16rpx;
						
						.tag {
							font-size: 24rpx;
							color: #666;
							background: #f8f9fa;
							padding: 6rpx 16rpx;
							border-radius: 20rpx;
							margin-right: 12rpx;
							margin-bottom: 12rpx;
						}
					}
					
					.hobby-list {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin-bottom: 16rpx;
						
						.hobby-label {
							font-size: 26rpx;
							color: #999;
							margin-right: 12rpx;
						}
						
						.hobby-item {
							font-size: 26rpx;
							color: #11e299;
							background: rgba(17, 226, 153, 0.1);
							padding: 4rpx 16rpx;
							border-radius: 20rpx;
							margin-right: 12rpx;
							margin-bottom: 8rpx;
						}
					}
					
					.girl-description {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
					}
				}
			}
		}
	}
}
</style>